<template>
	<view class="container">

		<view class="card">
			<view class="top">
				<view class="box-top air-add">
					<view v-if="nextLevel"
						style="width: 80%;height: 100%;display: flex;align-items: center;justify-content: center;">
						<image :src="getPlane(checkPlantList[0].airLevel+1)" mode="widthFix"></image>
					</view>
					<view class="box-item" v-else>
						<u-icon name="question" color="#4b5563" size="20"></u-icon>
						<!-- <view class="air-add-text">添加飞机</view> -->
					</view>
				</view>
				<view class="box-bottom">
					<view class="box-left">
						<view class="box-item air-add" @click="addPlant(1)">
							<view v-if="checkPlant1.uuid"
								style="width: 80%;height: 100%;display: flex;align-items: center;justify-content: center;">
								<image :src="getPlane(checkPlantList[0].airLevel)" mode="widthFix"></image>
							</view>
							<view class="box-item" v-else>
								<u-icon name="plus" color="#4b5563" size="20"></u-icon>
								<view class="air-add-text">添加飞机</view>
							</view>
						</view>
						<view class="box-item air-add" @click="addPlant(2)">
							<view v-if="checkPlant2.uuid"
								style="width: 80%;height: 100%;display: flex;align-items: center;justify-content: center;">
								<image :src="getPlane(checkPlantList[1].airLevel)" mode="widthFix"></image>
							</view>
							<view class="box-item" v-else>
								<u-icon name="plus" color="#4b5563" size="20"></u-icon>
								<view class="air-add-text">添加飞机</view>
							</view>
						</view>
					</view>
					<view class="box-right air-add" style="position: relative;" @click="addStone()">
						<view v-if="checkStone>0&&checkNumber>0"
							style="width: 98%;height: 98%;display: flex;align-items: center;justify-content: center;">
							<image :src="uploadUrl+checkItem.materialUrl" mode="widthFix" style="border-radius: 15rpx;display: block;"></image>
							<view class="air-add-text" style="position: absolute;bottom: 10rpx;right: 10rpx;">
								{{'x'+checkNumber}}
							</view>
						</view>
						<view class="box-item" v-else>
							<u-icon name="plus" color="#4b5563" size="20"></u-icon>
							<view class="air-add-text">添加合成石</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="type==0">
			<view class="info-card card">
				<view class="info-row">
					<view class="info-label">请先选择战机</view>
				</view>
			</view>
		</view>

		<view v-if="type==1">
			<view class="info-card card">
				<view class="info-row">
					<view class="info-label">战机等级不一致无法合成</view>
				</view>
			</view>
		</view>

		<view v-if="type==2">
			<!-- 升级信息卡片 -->
			<view class="info-card card">
				<view class="info-row">
					<view class="info-label">合成后等级:</view>
					<view class="info-value level">
						{{ hc.level ? ('lv'+hc.level) :'MAX' }}
					</view>
				</view>
				<view class="info-row">
					<view class="info-label">合成后收益:</view>
					<view class="info-value income">
						{{ hc.outputenerg ? (hc.outputenerg+'/天') :'MAX' }}
					</view>
				</view>
			</view>
			<!-- 成功率信息卡片 -->
			<view class="info-card card">
				<view class="info-row">
					<view class="info-label">基础成功率:</view>
					<view class="info-value base">{{hc.fakeRate}}%</view>
				</view>
				<view class="info-row">
					<view class="info-label">合成石加成:</view>
					<view class="info-value boost">{{hc.synthesisChance}}%</view>
				</view>
				<view class="info-row">
					<view class="info-label">合成石加成上限:</view>
					<view class="info-value boost">90%</view>
				</view>
				<view class="info-row">
					<view class="info-label">总成功率:</view>
					<view class="info-value total">
						{{ (hc.fakeRate + hc.synthesisChance) > 90 ? 90 : (hc.fakeRate + hc.synthesisChance)}}%
					</view>
				</view>
			</view>
			<!-- 合成按钮 -->
			<view class="synthesize-btn" :loading="loading" @click="handleSynthesize">
				<view class="btn-text">合成</view>
				<image v-if="txShow" class="tx" :src="txImg?'/static/tx-images/true.gif':'/static/tx-images/false.gif'"
					mode="widthFix"></image>
			</view>
		</view>


		<plantbag :show.sync="plantShow" :checkPlant1.sync="checkPlant1" :checkPlant2.sync="checkPlant2"
			:checkSquare="checkSquare" :checkPlantList.sync="checkPlantList" ref="plantRef"></plantbag>
		<stonebag :show.sync="stoneShow" :checkStone.sync="checkStone" :checkNumber.sync="checkNumber"
			:checkItem.sync="checkItem" ref="stoneRef">
		</stonebag>

	</view>
</template>

<script>
	import config from '@/config.js'
	import plantbag from '../plantbag/index.vue'
	import stonebag from '../stonebag/index.vue'
	import {
		getMsg,
		airSynthesis
	} from '@/api/plane.js'
	import {
		AES
	} from 'crypto-js';
	export default {
		components: {
			plantbag,
			stonebag,
		},
		data() {
			return {
				uploadUrl: config.uploadUrl,
				checkSquare: 0,
				checkPlant1: {},
				checkPlant2: {},
				checkStone: 0,
				checkNumber: 0,
				checkItem: {},
				checkPlantList: [{}, {}],
				number: 0,
				txShow: false,
				txImg: true,
				nextLevel: false,
				plantShow: false,
				stoneShow: false,
				hc: {},
				type: 0, //0无 1飞机类型不匹配 2飞机类型匹配
				loading: false
			};
		},
		watch: {
			checkPlantList: {
				handler(newVal) {
					if (newVal[0].airLevel && newVal[1].airLevel) {
						if (newVal[0].airLevel == newVal[1].airLevel) {
							this.getHc()
							this.type = 2
							this.nextLevel = true
						} else {
							this.type = 1
							this.nextLevel = false
						}
					}
				},
				deep: true
			},
			checkNumber: {
				handler(newVal) {
					this.getHc()
				}
			}
		},
		mounted() {

		},
		methods: {
			getPlane(index) {
				switch (index) {
					case 1:
						return '/static/fly-images/1.png'
					case 2:
						return '/static/fly-images/2.png'
					case 3:
						return '/static/fly-images/3.png'
					case 4:
						return '/static/fly-images/4.png'
					case 5:
						return '/static/fly-images/5.png'
					case 6:
						return '/static/fly-images/6.png'
					case 7:
						return '/static/fly-images/7.png'
					case 8:
						return '/static/fly-images/8.png'
					case 9:
						return '/static/fly-images/9.png'
					case 10:
						return '/static/fly-images/10.png'
					default:
						break;
				}
			},
			async getHc() {
				const data = {
					airplaneUserUuids: this.checkPlant1.uuid,
					number: this.checkNumber,
					syntheticId: this.checkStone
				}
				const res = await getMsg(data)
				this.hc = res.data
				console.log(res.data);
			},
			async handleSynthesize() {
				if (this.hc.fakeRate == 0) {
					uni.showToast({
						icon: 'none',
						title: '当前飞机等级已达到最高，无法合成'
					})
					return
				}

				this.loading = true
				try {
					const Dto = {
						airplaneUserUuids: [this.checkPlant1.uuid, this.checkPlant2.uuid],
						number: this.checkNumber,
						syntheticId: this.checkStone
					}
					const res = await airSynthesis(Dto)
					uni.showToast({
						icon: 'none',
						title: res.data
					})
					this.loading = false
				} catch (error) {
					this.loading = false
				}
				this.resetData()
			},
			resetData() {
				this.checkSquare = 0;
				this.checkPlant1 = {};
				this.checkPlant2 = {};
				this.checkStone = 0;
				this.checkNumber = 0;
				this.checkItem = {};
				this.checkPlantList = [{}, {}];
				this.number = 0;
				this.txImg = true;
				this.nextLevel = false;
				this.plantShow = false;
				this.stoneShow = false;
				this.hc = {};
				this.type = 0;
			},
			valChange(e) {
				console.log(e.value);
			},
			addPlant(id) {
				this.checkSquare = id
				this.plantShow = true
			},
			addStone() {
				this.stoneShow = true
			},
			false() {
				this.txImg = false
				this.txShow = true
				setTimeout(() => {
					this.txShow = false
				}, 1500)
			},
			true() {
				this.txImg = true
				this.txShow = true
				setTimeout(() => {
					this.txShow = false
				}, 1500)
			}

		}
	};
</script>

<style lang="scss" scoped>
	/* 信息卡片 */
	.info-card {
		margin-top: 30rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.info-label {
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.8);
	}

	.info-value {
		font-size: 28rpx;
		font-weight: 700;
		padding: 10rpx 20rpx;
		border-radius: 12rpx;

		&.level {
			color: #60a5fa;
			background: rgba(96, 165, 250, 0.15);
		}

		&.income {
			color: #34d399;
			background: rgba(52, 211, 153, 0.15);
		}

		&.base {
			color: #f87171;
			background: rgba(248, 113, 113, 0.15);
		}

		&.boost {
			color: #fbbf24;
			background: rgba(251, 191, 36, 0.15);
		}

		&.total {
			color: #a78bfa;
			background: rgba(167, 139, 250, 0.15);
		}
	}

	/* 材料卡片 */
	.material-card {
		margin-top: 30rpx;
		padding: 30rpx;
	}

	.material-header {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.material-title {
		line-height: 1;
		font-size: 28rpx;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.9);
	}

	.material-type {
		font-size: 32rpx;
		font-weight: 700;
		color: #fbbf24;
		background: rgba(251, 191, 36, 0.15);
		padding: 10rpx 20rpx;
		border-radius: 12rpx;
		align-self: flex-start;
	}

	.material-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.phase-label {
		font-size: 26rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.7);
		padding: 8rpx 16rpx;
		border-radius: 10rpx;
	}

	.synthesize-btn {
		position: relative;
		margin-top: 30rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(90deg, #6366f1, #8b5cf6);
		color: white;
		border-radius: 20rpx;
	}

	.tx {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;
		width: 500rpx;
		height: 500rpx;
	}

	.btn-text {
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 2rpx;
	}

	.input-popup {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.input-title {
		line-height: 1;
		font-size: 28rpx;
		font-weight: 500;
		color: #a0aec0;
	}

	.input-po {
		position: absolute;
		width: 100%;
		top: 100%;
		z-index: 2;
		border-radius: 15rpx;
		margin-top: 5rpx;
	}

	.input-line {
		width: 100%;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: left;
		font-size: 24rpx;
		font-weight: 500;
		color: #a0aec0;
	}

	.input-box {
		position: relative;
	}

	.top {
		padding: 40rpx 0;
		display: flex;
		align-items: center;
		flex-direction: column;

		.box-top {
			width: 220rpx;
			height: 220rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.box-bottom {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
		}

		.box-left {
			display: flex;
			align-items: center;
			gap: 20rpx;
		}

		.box-item {
			width: 160rpx;
			height: 160rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.box-right {
			width: 160rpx;
			height: 160rpx;
			margin-left: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.air-add {
			border-radius: 15rpx;
			border: #4b5563 dashed 5rpx;
		}

		.air-add-text {
			margin-top: 20rpx;
			line-height: 1;
			font-size: 24rpx;
			font-weight: 600;
			color: #4b5563;
		}
	}
</style>